<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>element</title>
<link rel="stylesheet" type="text/css" href="${path}/script/extjs-3.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="${path}/script/extjs-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${path}/script/extjs-3.2.1/ext-all.js"></script>
<style type="text/css">
	.test{
		background-color: #09F;
	}
</style>
</head>
<body>
<a href="javascript: showOrHide('div1');">隐藏/显示</a>
<a href="javascript: changeStyle('div1');">样式</a>
<a href="javascript: appendChild('div2');">添加子节点</a>
<a href="javascript: load('div3');">加载内容</a>
<a href="javascript: mask('div4');">遮罩内容</a>
<a href="javascript: update('div5');">更新内容</a>
<a href="javascript: testDefineElement('div6');">自定义的</a>
<a href="javascript: markPenel();">组件使用元素的方法</a>
<div id="div1">普通的DIV</div>
<div id="div1">普通的DIV</div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4">遮罩</div>
<div id="div5">更新</div>
<div id="div6">普通的DIV</div>
<div id="div7"></div>
<script type="text/javascript">
// Element是对DOM的封装
function showOrHide(id){
	// 返回Ext.Element
	Ext.get(id).toggle(true);
}

function changeStyle(id){
	var el = Ext.get(id);
	if(el.hasClass("test")){
		el.removeClass("test");
	}else{
		el.addClass("test");
	}
}

function appendChild(id){
	var nel = new Ext.Element("abc", true);
	var el = Ext.get(id);
	el.appendChild(nel);
}

function load(id){
	var el = Ext.get(id);
	el.load("http://www.163.com"); // 不能跨域
}

function mask(id){
	var el = Ext.get(id);
	el.mask(); // unmask
}

function update(id){
	var el = Ext.get(id);
	el.update("ok");
}

// 仿Ext.Element类
sh = {};
sh.get = function(id){
	return new sh.Element(id);
};
sh.Element = function(id){
	this.dom = document.getElementById(id);
};
sh.Element.prototype.toggle = function(){
	this.dom.style.display = (this.dom.style.display == "none" ? "" : "none");
};

function testDefineElement(id){
	sh.get(id).toggle(true);
}

// 组件使用el方法获得Element，使用Element的方法
var panel = new Ext.Panel({
	id: "p1",
	height: 300,
	width: 200,
	html: "面板"
});
panel.render("div7");
function markPenel(){
	var penel = Ext.getCmp("p1");
	// 需要先渲染到页面上
	penel.el.mask();
}

// Component Element DOM 三者关系
// co.el.dom
// get(Mixed el) Element
// getBody() Element
// getDoc() Element
// getCmp(String id) Component
// getDom(Mixed el) DOM
</script>
</body>
</html>
